<template>
  <div class="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')" :style="{height:height}">
    <!-- 图片 -->
    <img :class="['imgCss',ShowImg==index?'ShowCss':'']" :src="item[prop]" v-for="(item,index) in imgList" :key="index"
      @click="getIndex(ShowImg)" :style="{borderRadius:borderRadius}" />
    <!-- 左箭头按钮 -->
    <div class="leftBtn" @click="throttle(PrevFun)" :class="isMove?'rightBtnShow':'rightBtnHidden'">
      <img src="./images/left.png" class="btnImg" alt="">
    </div>
    <!-- 右箭头按钮 -->
    <div class="rightBtn" @click="throttle(NextFun)" :class="isMove?'rightBtnShow':'rightBtnHidden'"><img
        class=" btnImg" src="./images/right.png" alt=""></div>
    <!-- 下方指示点容器 -->
    <div class="instBox" v-if="indicator">
      <div v-for="(item,index) in imgList.length" :key="index" @click="ShowImg=index"
        :class="['inst',ShowImg==index?'instActv':'']"
        :style="{'--indicatorColor':indicatorColor,'width':indicatorSize+'px','height':indicatorSize+'px'}">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'yzw-carousel',
  props: {
    // 图片数组
    imgList: {
      type: Array,
      default: []
    },
    // 间隔时间
    delay: {
      type: Number,
      default: 3000
    },
    // 圆角角度
    borderRadius: {
      type: String,
      default: '2px'
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true
    },
    // 是否显示指示点
    indicator: {
      type: Boolean,
      default: true
    },
    // 指示点颜色
    indicatorColor: {
      type: String,
      default: '#99a9bf'
    },
    // 指示点大小
    indicatorSize: {
      type: Number,
      default: 10
    },
    // 高度
    height: {
      type: String,
      default: '300px'
    },
    // 图片的属性
    prop: {
      type: String,
      default: 'imgUrl'
    }
  },
  data() {
    return {
      ShowImg: 0,  // 表示当前显示的图片
      flag: true, // 用来节流防止重复点击
      start: null, // 自动执行下一张定时器
      isMove: false,
    }
  },
  mounted() {
    this.setTimeoFun()
  },
  methods: {
    // 获取索引
    getIndex(index) {
      this.$emit('getIndex', index)
    },
    // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
    MouseFun(type) {// 停止定时器            // 重新执行定时器
      this.$nextTick(() => {
        type == '移入' ? clearTimeout(this.start) : this.setTimeoFun()
        type == '移入' ? this.isMove = true : this.isMove = false
      })
    },
    setTimeoFun() {
      if (this.autoplay) {
        this.start = setInterval(() => {
          this.NextFun()
        }, this.delay)
      }
    },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    throttle(fun) {
      if (this.flag) {
        this.flag = false;
        fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
        setTimeout(() => {
          this.flag = true;
        }, 500); // 节流间隔时间
      }
    },
    // 上一张
    PrevFun() {
      if (this.ShowImg !== 0) {
        this.ShowImg--
      } else {
        this.ShowImg = this.imgList.length - 1
      }
    },
    // 下一张
    NextFun() {
      if (this.ShowImg !== this.imgList.length - 1) {
        this.ShowImg++
      } else {
        this.ShowImg = 0
      }
    },
  }
}
</script>
<style scoped lang="scss">
@import url(./css/index.css);
</style>